<!DOCTYPE html>
<!--
DOM 0 
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //为所有的对象加点击事件
                var all = $("*");
                /*for(var i=0;i<all.length;i++) {
                    //1获取点击的元素 rel就是最后的元素 rel.id 不适用
                    var rel = all[i];
                    all[i].onclick = function(event) {
                        //获取事件发生的目标
                        //根据不同的浏览器进行判断，
                        event = event?event:window.event;
                        //IE不知道target 而是使用srcElement来代替
                        var target = event.target?event.target:event.srcElement;
                        print("事件源:"+target.id+","+target.tagName+","+"事件对象:"+this.id+"-->"+this.nodeType);
                    }
                }*/
                //闭包的写法
                all.each(function(){
                    var rel = this;
                    this.onclick = function(event){
                        //获取事件发生的目标
                        //根据不同的浏览器进行判断，
                        event = event?event:window.event;
                        //IE不知道target 而是使用srcElement来代替
                        var target = event.target?event.target:event.srcElement;
                        print("事件源:"+target.id+","+target.tagName+","+"事件对象:"+this.id+"-->"+this.nodeType);
                        //默认的DOM0 会产生事件冒泡 可以通过
                        //stopPropagation 阻止事件冒泡
                        event.stopPropagation();
                        //ie通过阻止
                        //event.cancelBubble = true;
                        
                        //DOM0 模型不支持事件捕获
                        //DOM0 带来的
                    };
                });
                function print(txt) {
                    $("#content").append(txt+"<br/>");
                }
            });
        </script>
    </head>
    <body id="body">
        <div id="parent">
            <div id="child">
                点了看一下
            </div>
        </div>
        <div id="content"></div>
    </body>
</html>
